<template>
  <div class="qrcode-cont">
    <div class="flex title">
      <span>检定中心证书查询</span>
      <!-- <span>服务热线:100-1100-1001</span> -->
    </div>
    <!-- <p class="e-name">Verification center</p> -->
    <div class="info-cont">
      <div class="cont-item" v-for="(item, index) in list" :key="index">
        <span>{{ item.label }}：</span><span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { getDataByCertCode } from '/@/api/jd/water-box';
  import { useMessage } from '/@/hooks/web/useMessage';

  const route = useRoute();

  const { createMessage } = useMessage();

  const list = ref([
    { label: '证书单位', value: '-' },
    { label: '证书编号', value: '-' },
    { label: '证书类型', value: '-' },
    { label: '仪器名称', value: '-' },
    { label: '规格型号', value: '-' },
    { label: '出厂编号', value: '-' },
    { label: '资产编号', value: '-' },
    { label: '制造厂商', value: '-' },
    { label: '检/校日期', value: '-' },
    { label: '校准/检定员', value: '-' },
    { label: '是否外改', value: '-' },
  ]);

  const getContent = async () => {
    const {
      query: { c },
    } = route;

    if (!c) {
      createMessage.warning('url中合格证编码丢失');
      return;
    }
    const ret = await getDataByCertCode(c as string);

    list.value = [
      { label: '证书单位', value: ret.certificateUnit || '-' },
      { label: '证书编号', value: ret.certificateNumber || '-' },
      { label: '证书类型', value: ret.certificateType || '-' },
      { label: '仪器名称', value: ret.waterCodeType || '-' },
      { label: '规格型号', value: ret.waterMeterType || '-' },
      { label: '出厂编号', value: ret.waterMeterCode || '-' },
      { label: '资产编号', value: ret.assetCode || '-' },
      { label: '制造厂商', value: ret.factory || '-' },
      { label: '检/校日期', value: ret.checkDate || '-' },
      { label: '校准/检定员', value: ret.operator || '-' },
      // { label: '是否外改', value: '-' },
    ];
  };

  getContent();
</script>

<style lang="less" scoped>
  .qrcode-cont {
    padding: 16px;
    min-height: 100vh;
    background-color: #f9f9f9;
    font-size: 14px;

    .title {
      justify-content: space-between;

      span {
        &:first-child {
          font-size: 28px;
          font-weight: bold;
        }

        // &:last-child {
        //   padding-top: 15px;
        //   font-size: 14px;
        // }
      }
    }

    .e-name {
      color: rgb(0, 201, 200);
      font-weight: bold;
    }

    .info-cont {
      padding: 16px;
      background: rgb(231, 241, 246);
      border-radius: 4px;
      margin-top: 24px;

      .cont-item {
        margin-bottom: 16px;

        :last-child {
          margin-bottom: 0;
        }

        span {
          &:first-child {
            font-weight: bold;
            color: #515a5e;
          }

          &:last-child {
            padding-top: 15px;
            font-size: 14px;
            color: #5f5151;
          }
        }
      }
    }
  }
</style>
